<template>
	<view class="projectToPage flexColumn" style="">
		<!-- 顶部吸顶定位 -->
		<u-sticky>
			<view class="title" style="background-color: #fff;">
				{{projectInfo.Name}}
			</view>
			<view class="uni-padding-wrap" style="background-color: #fff">
				<uni-segmented-control :current="currentItem" :values="items" :style-type="'text'"
					:active-color="'rgb(209, 16, 10)'" @clickItem="onClickItem" />
			</view>
		</u-sticky>

		<!-- <view class="remark">
			{{entity.Remark?entity.Remark:'暂无描述'}}
		</view> -->

		<view style="display: flex;flex: 1;" class="flexColumn">
			<view class="content" style="padding-left:140rpx">
				<!-- 选项卡1的内容 -->
				<view class="" style="">
					<TaskList :pid="entity.ProjectId||projectInfo.Id" :pName="projectInfo.Name"
						:creatorId="projectInfo?projectInfo.CreatorId:''" v-if="currentItem===0" />
				</view>

				<!-- 选项卡2的内容 -->
				<PhotoAlbum ref="PhotoAlbum" :pid="entity.ProjectId||projectInfo.Id" :pName="projectInfo.Name"
					v-if="currentItem === 1" />
				<!-- 选项卡3的内容 -->
				<ReportPDF ref="ReportPDF" :pid="entity.ProjectId||projectInfo.Id" :pName="projectInfo.Name"
					v-if="currentItem === 2"></ReportPDF>
				<!-- 选项卡4的内容 -->
				<Inspection ref="Inspection" :showPropSearch="false" :pid="entity.ProjectId||projectInfo.Id"
					:pName="projectInfo.Name" v-if="currentItem === 3" :isReset="false" />
			</view>
		</view>
	</view>
</template>

<script>
	import TaskList from '../TaskList.vue' // 任务列表
	import Inspection from '../../Inspection/Inspection.vue' // 巡检列表
	import PhotoAlbum from '../../PhotoAlbum/PhotoAlbum.vue' // 照片
	import ReportPDF from './ReportPDF.vue' // 报告PDF
	export default {
		components: {
			TaskList,
			Inspection,
			PhotoAlbum,
			ReportPDF
		},
		data() {
			return {
				entity: {},
				projectInfo: {},
				items: ['任务', '照片', '报告文件', '巡检记录'],
				currentItem: 0,

			}
		},
		onLoad(options) {
			this.entity.ProjectId = options.ProjectId
			this.getProjectInfo(options.ProjectId)

			console.log("打印传入的项目实体", this.entity);
		},
		onShow() {
			console.log('返回主页面');
			if (this.currentItem == 3) this.$refs.Inspection.getDataList()
		},
		onReachBottom() {
			console.log('主页面触底');
			if (this.currentItem == 3) {
				this.$nextTick(() => {
					this.$refs.Inspection.concatList()
				})
			} else if (this.currentItem == 2) {
				this.$nextTick(() => {
					this.$refs.ReportPDF.concatList()
				})
			} else if (this.currentItem == 1) {
				this.$nextTick(() => {
					this.$refs.PhotoAlbum.concatList()
				})
			}
		},
		methods: {
			getProjectInfo(projectId) {
				this.$http('Base_ProjectWork/Base_Project/GetTheData', {
					id: projectId
				}).then(res => {
					if (res.Success) {
						this.projectInfo = res.Data
					}
				})
			},
			onClickItem(e) {
				console.log('点击tab', e)
				if (e.currentIndex == 3) {
					this.$nextTick(function() {
						this.$refs.Inspection.isImageViewType = '巡检记录'
						this.$refs.Inspection.isUpload = true
						this.$refs.Inspection.isEdit = true
						this.$refs.Inspection.isSubmit = true
					})
				}
				if (e.currentIndex == 1) {
					this.$nextTick(function() {
						this.$refs.PhotoAlbum.isUpload = true
						this.$refs.PhotoAlbum.isEdit = true
						this.$refs.PhotoAlbum.isSubmit = true
					})
				}
				if (this.currentItem !== e.currentIndex) {
					this.currentItem = e.currentIndex
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.flexColumn {
		display: flex;
		flex-direction: column;
	}

	.projectToPage {
		width: 100%;
		height: calc(100vh - 88rpx);
		box-sizing: border-box;
		padding: 0 20rpx;
		padding-top: 0;

		.title {
			line-height: 2;
			font-size: 40rpx;
			font-weight: 600;
		}

		.remark {
			max-height: 120rpx;
			min-height: 44rpx;
			overflow-y: scroll;
		}

		.body {
			button {
				margin-top: 30rpx;
			}
		}
	}

	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		// background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.uni-padding-wrap {}

	.content {
		flex: 1;
	}

	.content-text {
		color: #333;
	}

	/* #endif */
</style>